<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 v-text-danger="msg "></h1>
        <div>
            <input type="text" v-bind-blue="msg">
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>

        //定义全局的指令
        //函数式
        Vue.directive('text-danger', function (element, binding) {
            //对于自定义指令来说，函数体当中的this是window，而不是vue实例
            console.log(this);
            element.innerText = binding.value
            element.style.color = 'red'
        })

        // 对象式
        Vue.directive('bind-blue', {
            bind(element, binding) {
                element.innerText = binding.value
            },
            //元素被插入到页面之后。这个函数自动被调用
            inserted(element, binding) {
                element.parentNode.style.backgroundColor = 'blue'
            },
            //当模板重新被解析的时候，这个函数会被自动调用
            update(element, binding) {
                element.innerText = binding.value
            }
        }
        )
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '自定义指令'
            },
            directives: {
                //指令1
                //指令2
                //.....
                /**关于指令的名字： 1，v-不需要写。2vue官方建议指令的名字要全部小写，如果是多个单词的话，
                请使用 - 进行链接， 这个回调函数的执行时机包括两个，第一个：标签和指令第一次执行的时候
                第二个：模板被重新解析的时候 这个回调函数有两个参数：第一个参数是真实的dom元素，第二个
                参数是标签与指令之间绑定关系的对象**/
                //这种是函数式
                // 'text-danger': function (element, binding) {
                //     element.innerText = binding.value
                //     element.style.color = 'red'
                // },
                //对象式
                // 'bind-blue': {
                //     //这个对象中三个方法的名字不能随便写
                //     //这三个函数将来都会被自动调用
                //     //元素与指令初次绑定的时候，自动调用bind
                //     //在特定的事件节点调用特定的函数，这种被调用的函数称为钩子函数
                //     bind(element, binding) {
                //         element.innerText = binding.value
                //     },
                //     //元素被插入到页面之后。这个函数自动被调用
                //     inserted(element, binding) {
                //         element.parentNode.style.backgroundColor = 'blue'
                //     },
                //     //当模板重新被解析的时候，这个函数会被自动调用
                //     update(element, binding) {
                //         element.innerText = binding.value
                //     }
                // }

            }
        })
    </script>
</body>

</html>